<template>
	<div v-if="!isDetail">
		<base-form v-model:filter-config="formConfig" v-model:filter-form="forms" @getFormValue="handleGetFormValues"
			@push-form-ref="handleRefDom">
		</base-form>
		 <el-button type="primary">	搜索</el-button>
		 <el-button type="info">	重置</el-button>
		<div class="top-box">
			<div>查询结果：共计 <span>1242</span> 条数据</div>
			<div>刷新列表</div>
		</div>
		<!-- <BaseTable :columns="columns" :table-data="tableData"></BaseTable> -->
		<BaseTable class="base-stencil has_padding_top" :table-data="tableData" :isSearch="true" :columns="columns"
			:pagination="submitForm" :options="true" :loading="tloading" :option-show="false"
			@on-update-forms="getFormValue" >
		</BaseTable>
	</div>
	<div v-if="isDetail">
		<detail></detail>
	</div>
</template>
<script setup>
	import {
		reactive,
		toRefs,
		ref,
		h
	} from "vue";
	import BaseTable from '../../../components/BaseTable/BaseTable.vue'
	import BaseForm from "@/components/BaseForm/BaseForm.vue";
	import Detail from "../components/detail.vue"
	import {ElButton} from "element-plus";
	import { cloneDeep } from 'lodash-es'
	const state = reactive({
		columns: [{
				key: 'name',
				title: '项目状态',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '缴费状态',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '新客户',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '预约编号',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '预约姓名',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '性别(男/女)',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '年龄(岁)',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '手机号码',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '预约项目',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '预约医生(大夫)',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '预约渠道',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '问诊费用(元)',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '操作',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
		],
		tableData: [{
			name: "1",
			name1: "1"
		}],
		submitForm: {
			orderBy: "",
			rule: "asc",
			page: {
				size: 10,
				current: 1
			},
			total: 0,

		},
		tloading: false,
		isDetail:true
	})
	const forms = ref({
		username: "",
		password: "",
	})
	const handleGetFormValues=()=>{
		forms.value = cloneDeep(e)
	}
	const handleRefDom=()=>{}
	const getFormValue=()=>{}
	const formConfig = ref({
		elForm: {
			labelPosition: "right",
			labelWidth: 70,
		},
		typeSetting: [
			[ {
				component: 'datePickerTwo',
				vModel: 'licenseDate',
				col: {
					span: 6
				},
				elModel: {
					style: {
						// width: "360px",
					}
				},
				formItem: {
					label: `创建时间`,
					prop: "licenseDate",
					style: {
						// width: "485px",
					}

				},
				isHidden: () => false,
				disabled: () => false,
			},
			{
			    col:{
			      span:4,
			    },
			    component: 'select',
			    vModel: 'sourceChannelId',
			    elOption:{
			        // options:()=> {
			        //     options.channelList.map((item,index)=>{
			        //         if(['1','2','3'].includes(item.id)){
			        //                 item.className = 'hidden-options'
			        //             }
			        //         })
			        //     return options.channelList
			        // }, 
			    },
			    formItem:{
			        label:'预约状态',
			        prop:"sourceChannelId",
			    },
			    elModel: {
			        placeholder: "请选择",
			        clearable: true,
			        style: {
			            // width: "780px",
			        },
			        props:{
			            label:"sourceChannel",
			            value:"id"
			        },
			        onClick:(e)=>{
			        },
			        onChange:(e)=>{
			            options.channelList.map((item)=>{
			                if(item.id == e){
			                    state.forms.sourceChannel = item.sourceChannel
			                }
			            })
			        }
			    },
			    isHidden: () => false,
			    disabled: () => false,
			},
			{
			    col:{
			      span:4,
			    },
			    component: 'select',
			    vModel: 'sourceChannelId',
			    elOption:{
			        // options:()=> {
			        //     options.channelList.map((item,index)=>{
			        //         if(['1','2','3'].includes(item.id)){
			        //                 item.className = 'hidden-options'
			        //             }
			        //         })
			        //     return options.channelList
			        // }, 
			    },
			    formItem:{
			        label:'预约项目',
			        prop:"sourceChannelId",
			    },
			    elModel: {
			        placeholder: "请选择",
			        clearable: true,
			        style: {
			            // width: "780px",
			        },
			        props:{
			            label:"sourceChannel",
			            value:"id"
			        },
			        onClick:(e)=>{
			        },
			        onChange:(e)=>{
			            options.channelList.map((item)=>{
			                if(item.id == e){
			                    state.forms.sourceChannel = item.sourceChannel
			                }
			            })
			        }
			    },
			    isHidden: () => false,
			    disabled: () => false,
			},
			{
			    col:{
			      span:4,
			    },
			    component: 'select',
			    vModel: 'sourceChannelId',
			    elOption:{
			        // options:()=> {
			        //     options.channelList.map((item,index)=>{
			        //         if(['1','2','3'].includes(item.id)){
			        //                 item.className = 'hidden-options'
			        //             }
			        //         })
			        //     return options.channelList
			        // }, 
			    },
			    formItem:{
			        label:'缴费状态',
			        prop:"sourceChannelId",
			    },
			    elModel: {
			        placeholder: "请选择",
			        clearable: true,
			        style: {
			            // width: "780px",
			        },
			        props:{
			            label:"sourceChannel",
			            value:"id"
			        },
			        onClick:(e)=>{
			        },
			        onChange:(e)=>{
			            options.channelList.map((item)=>{
			                if(item.id == e){
			                    state.forms.sourceChannel = item.sourceChannel
			                }
			            })
			        }
			    },
			    isHidden: () => false,
			    disabled: () => false,
			},
			{
				component: 'input',
				vModel: 'licenseNumber',
				col: {
					span: 5
				},
				formItem: {
					label: `预约编号`,
					prop: "licenseNumber",
				},
				elModel: {
					placeholder: `请输入`,
					type: 'text',
					clearable: true,
					style: {
						// width: "360px",
					}
				},
				isHidden: () => false,
				disabled: () => false,
			},{
				component: 'input',
				vModel: 'licenseNumber',
				col: {
					span: 5
				},
				formItem: {
					label: `客户姓名`,
					prop: "licenseNumber",
				},
				elModel: {
					placeholder: `请输入`,
					type: 'text',
					clearable: true,
					style: {
						// width: "360px",
					}
				},
				isHidden: () => false,
				disabled: () => false,
			},{
				component: 'input',
				vModel: 'licenseNumber',
				col: {
					span: 5
				},
				formItem: {
					label: `预约手机`,
					prop: "licenseNumber",
				},
				elModel: {
					placeholder: `请输入`,
					type: 'text',
					clearable: true,
					style: {
						// width: "360px",
					}
				},
				isHidden: () => false,
				disabled: () => false,
			}, {
			    col:{
			      span:4,
			    },
			    component: 'select',
			    vModel: 'sourceChannelId',
			    elOption:{
			        // options:()=> {
			        //     options.channelList.map((item,index)=>{
			        //         if(['1','2','3'].includes(item.id)){
			        //                 item.className = 'hidden-options'
			        //             }
			        //         })
			        //     return options.channelList
			        // }, 
			    },
			    formItem:{
			        label:'是否作废',
			        prop:"sourceChannelId",
			    },
			    elModel: {
			        placeholder: "请选择",
			        clearable: true,
			        style: {
			            // width: "780px",
			        },
			        props:{
			            label:"sourceChannel",
			            value:"id"
			        },
			        onClick:(e)=>{
			        },
			        onChange:(e)=>{
			            options.channelList.map((item)=>{
			                if(item.id == e){
			                    state.forms.sourceChannel = item.sourceChannel
			                }
			            })
			        }
			    },
			    isHidden: () => false,
			    disabled: () => false,
			},{
			    col:{
			      span:4,
			    },
			    component: 'select',
			    vModel: 'sourceChannelId',
			    elOption:{
			        // options:()=> {
			        //     options.channelList.map((item,index)=>{
			        //         if(['1','2','3'].includes(item.id)){
			        //                 item.className = 'hidden-options'
			        //             }
			        //         })
			        //     return options.channelList
			        // }, 
			    },
			    formItem:{
			        label:'预约渠道',
			        prop:"sourceChannelId",
			    },
			    elModel: {
			        placeholder: "请选择",
			        clearable: true,
			        style: {
			            // width: "780px",
			        },
			        props:{
			            label:"sourceChannel",
			            value:"id"
			        },
			        onClick:(e)=>{
			        },
			        onChange:(e)=>{
			            options.channelList.map((item)=>{
			                if(item.id == e){
			                    state.forms.sourceChannel = item.sourceChannel
			                }
			            })
			        }
			    },
			    isHidden: () => false,
			    disabled: () => false,
			}]
		// 	,()=>{
  //   return h(ElButton,{
  //     round:false,
  //     type:"primary",
  //     loading:state.loading,
  //     style:{
  //       width:"100px",
  //       height:"40px",
  //       fontSize:"16px",
  //       marginTop:"20px"
  //     },
  //     color:"#007BD3",
  //     onClick:()=>{
  //       let {validate} = baseForm.value
  //       validate(e=>{
  //         if(e){

  //         }
  //       })
  //     },
  //     disabled:false,
  //   },{default:()=> ("搜索")})
  // },()=>{
  //   return h(ElButton,{
  //     round:false,
  //     loading:state.loading,
  //     style:{
  //       width:"100px",
  //       height:"40px",
  //       fontSize:"16px",
  //       marginTop:"20px",
  //     },
  //     onClick:()=>{
  //       let {validate} = baseForm.value
  //       validate(e=>{
  //         if(e){

  //         }
  //       })
  //     },
  //     disabled:false,
  //   },{default:()=> ("重置")})
  // },
		]
	})
	const {
		columns,
		tableData,
		submitForm,
		tloading,
		isDetail
	} = toRefs(state)
</script>
<style scoped lang="scss">
	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 20px;
	}
</style>